<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- AdThrive Head Tag Manual -->
    <script data-no-optimize="1" data-cfasync="false">
      (function (w, d) {
        w.adthrive = w.adthrive || {};
        w.adthrive.cmd = w.adthrive.cmd || [];
        w.adthrive.plugin = "adthrive-ads-manual";
        w.adthrive.host = "ads.adthrive.com";
        var s = d.createElement("script");
        s.async = true;
        s.referrerpolicy = "no-referrer-when-downgrade";
        s.src =
          "https://" +
          w.adthrive.host +
          "/sites/643436a4e6d20859e40a446b/ads.min.js?referrer=" +
          w.encodeURIComponent(w.location.href) +
          "&cb=" +
          (Math.floor(Math.random() * 100) + 1);
        var n = d.getElementsByTagName("script")[0];
        n.parentNode.insertBefore(s, n);
      })(window, document);
    </script>
    <!-- End of AdThrive Head Tag -->

    <!-- Global site tag (gtag.js) - Google Analytics -->

    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-6"
    ></script>

    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "UA-79254642-6");
    </script>

    <meta charset="utf-8" />
    <title>Arc diagram &#124; the D3 Graph Gallery</title>

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="Arc diagram with Javascript and D3.js: a set of simple examples with reproducible code."
    />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Javascript,D3,D3.js,sankey, flow chart"
    />
    <meta name="author" content="Yan Holtz" />
    <link rel="icon" href="img/logo/D3_single_small.png" />

    <meta
      property="og:title"
      content="Arc diagram &#124; the D3 Graph Gallery"
    />
    <meta property="og:image" content="img/overview_RGG.png" />
    <meta
      property="og:description"
      content="Arc diagram with Javascript and D3.js: a set of simple examples with reproducible code."
    />

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom fonts for this template -->
    <link
      href="vendor/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Kaushan+Script"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"
      rel="stylesheet"
      type="text/css"
    />

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet" />

    <!-- JQUERY -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- PRISM -->
    <script src="LIB/prism.js"></script>
    <link href="LIB/prism.css" rel="stylesheet" />

    <!-- D3.JS v4 -->
    <script src="js/d3.v4.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  </head>

  <body id="page-top">
    <!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
    <script>
      $(function () {
        $("#mainNav").load("html_chunk/menu.html");
      });
    </script>

    <!-- THIS ALLOWS TO INSERT THE MODAL OF THE MENU THAT IS STORED IN A MENU_MODAL.HTML FILE-->
    <div id="modal_menu_insertion"></div>
    <script>
      $(function () {
        $("#modal_menu_insertion").load("html_chunk/menu_modal.html");
      });
    </script>

    <!-- Header -->
    <header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
      <div class="textlanding">
        <h1>Arc diagram</h1>
        <hr class="short_hr" />
        <br />
        <ul class="list-inline social-buttons">
          <li class="list-inline-item">
            <a href="https://twitter.com/R_Graph_Gallery">
              <i class="fa fa-twitter"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://github.com/holtzy">
              <i class="fa fa-github" style="color: white"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
              <i class="fa fa-linkedin"></i>
            </a>
          </li>
          <li class="list-inline-item social-buttons">
            <a href="https://www.yan-holtz.com">
              <i class="fa fa-home"></i>
            </a>
          </li>
        </ul>
        <br /><br />
        <p style="max-width: 700px; margin: auto">
          An
          <a href="https://www.data-to-viz.com/graph/arc.html">arc diagram</a>
          is a special kind of <a href="network.html">network</a> graph. It is
          constituted by <u>nodes</u> that represent entities and by
          <u>links</u> that show relationships between entities. In arc
          diagrams, nodes are displayed along a <u>single axis</u> and links are
          represented with <u>arcs</u>
        </p>
      </div>
    </header>

    <!-- THIS ALLOWS TO INSERT THE ADVERTISEMENT BANNER THAT IS STORED IN A BANNER.HTML FILE-->
    <div id="position_for_images"></div>
    <script>
      $(function () {
        $("#position_for_images").load("html_chunk/images.html");
      });
    </script>

    <!-- ======================== PORTFOLIO SECTION ============================ --><!-- Images must be 480 x 480, resize them with ./script_reformat_img.sh output_name.png -->
    <section class="bg" id="portfolio" style="padding-top: 10px">
      <div class="container">
        <p class="mySeryTitle">A note on input data format</p>
        <hr />
        <p>
          Building an arc diagram requires information on <u>nodes</u> and
          <u>links</u>. This information can be stored in many different format
          as described
          <a href="https://www.data-to-viz.com/graph/network.html">here</a>.
          <code>Json</code> format is the most convenient way to work with
          <code>d3.js</code> and looks basically like that:
        </p>
        <div id="summary">
          <div class="collapse" id="collapseSummary">
            <pre
              class="language-js"
            ><code id="codejs" contenteditable="false"><xmp>{ "nodes": [
  { "id": 1, "name": "A" },
  { "id": 2, "name": "B" }
],
"links": [
  { "source": 1, "target": 2 }
]}</xmp></code></pre>

            <p>
              It is unlikely that your data are currently at this format. You
              probably need to <u>reformat</u> your data first using another
              tool like <code>R</code>. The
              <a href="graph/network_data_format.html">following document</a>
              gives a few example on how to reformat the most common types of
              input to get a <code>json</code> file.
            </p>
            <a
              class="btn btn-secondary btn-md text-uppercase"
              href="graph/network_data_format.html"
              >Reformat your data to Json</a
            >
          </div>
          <a
            class="collapsed"
            data-toggle="collapse"
            href="#collapseSummary"
            aria-expanded="false"
            aria-controls="collapseSummary"
          ></a>
        </div>

        <br /><br /><br /><br />
        <div class="mySeryTitle">Step by step</div>
        <hr />
        <p>
          The following most
          <a href="graph/arc_basic.html">basic arc diagram</a> will guide you
          through the core steps of this chart. Next charts show how to turn it
          <a href="graph/arc_vertical.html">vertical</a> and how to
          <a href="graph/arc_highlight.html">highlight links</a> on hover.
        </p>
        <div id="portfolio-items" class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="graph/arc_basic.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Most basic</p>
                  <hr />
                  <p class="explanation_portfolio">
                    The most basic arc diagram you can do in d3.js. Keeping only
                    the core code.
                  </p>
                </div>
              </div>
              <img class="img-fluid" src="img/graph/arc_basic.png" alt="" />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="graph/arc_vertical.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Vertical version</p>
                  <hr />
                  <p class="explanation_portfolio">
                    Just a variation putting the nodes along a vertical line
                  </p>
                </div>
              </div>
              <img class="img-fluid" src="img/graph/arc_vertical.png" alt="" />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a class="portfolio-link" href="graph/arc_highlight.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Highlights a node</p>
                  <hr />
                  <p class="explanation_portfolio">
                    Hover a node to highlight all its related links.
                  </p>
                </div>
              </div>
              <img class="img-fluid" src="img/graph/arc_highlight.gif" alt="" />
            </a>
          </div>
        </div>

        <br /><br /><br /><br />
        <div class="mySeryTitle">Template</div>
        <hr />
        <p>
          Here is an arc diagram showing the relationships between researchers.
          One <u>node</u> is drawn for each researcher having published at least
          one paper with my previous supervisor,
          <a href="https://sites.google.com/site/ranwez/">Vincent Ranwez</a>.
          Two researchers are <u>linked</u> if they co-authored at least one
          paper together. Read more about this dataset
          <a href="https://www.data-to-viz.com/story/AdjacencyMatrix.html"
            >here</a
          >.
        </p>
        <p>Hover nodes for more info</p>
        <a
          class="btn btn-secondary btn-md text-uppercase"
          href="graph/arc_template.html"
          >See code</a
        >
        <div id="my_dataviz"></div>

        <br /><br /><br /><br />
        <div class="mySeryTitle">Selection of blocks</div>
        <hr />
        <p>
          A few blocks with more complicated codes to showcase what's possible
          to do with arc diagram.
        </p>
        <div id="portfolio-items" class="row">
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="https://bl.ocks.org/rpgove/53bb49d6ed762139f33bdaea1f3a9e1c"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Highlight links</p>
                  <hr />
                  <p class="explanation_portfolio">
                    This block shows how to highlight all links of a node on
                    hover.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid showBlock"
                src="img/block/block_arcHover.png"
                alt="Arc diagram highlight"
              />
            </a>
          </div>
          <div class="col-md-4 col-sm-6 portfolio-item">
            <a
              class="portfolio-link"
              href="http://bl.ocks.org/mayblue9/dcc49ef6e3888f37f755177c4a248f2c"
            >
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <p>Button for order</p>
                  <hr />
                  <p class="explanation_portfolio">
                    Add a button that controls node order along the axis.
                  </p>
                </div>
              </div>
              <img
                class="img-fluid showBlock"
                src="img/block/block_arcbutton.png"
                alt="Arc diagram highlight"
              />
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- ======================================================================= -->

    <!-- ================== TEMPLATE CHART ===================================================== -->

    <script>
      // set the dimensions and margins of the graph
      var margin = { top: 0, right: 30, bottom: 80, left: 60 },
        width = 1170 - margin.left - margin.right,
        height = 640 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svg = d3
        .select("#my_dataviz")
        .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      // Read dummy data
      d3.json(
        "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_researcherNetwork.json",
        function (data) {
          // List of node names
          var allNodes = data.nodes.map(function (d) {
            return d.name;
          });

          // List of groups
          var allGroups = data.nodes.map(function (d) {
            return d.grp;
          });
          allGroups = [...new Set(allGroups)];

          // A color scale for groups:
          var color = d3.scaleOrdinal().domain(allGroups).range(d3.schemeSet3);

          // A linear scale for node size
          var size = d3.scaleLinear().domain([1, 10]).range([2, 10]);

          // A linear scale to position the nodes on the X axis
          var x = d3.scalePoint().range([0, width]).domain(allNodes);

          // In my input data, links are provided between nodes -id-, NOT between node names.
          // So I have to do a link between this id and the name
          var idToNode = {};
          data.nodes.forEach(function (n) {
            idToNode[n.id] = n;
          });

          // Add the links
          var links = svg
            .selectAll("mylinks")
            .data(data.links)
            .enter()
            .append("path")
            .attr("d", function (d) {
              start = x(idToNode[d.source].name); // X position of start node on the X axis
              end = x(idToNode[d.target].name); // X position of end node
              return [
                "M",
                start,
                height - 30, // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
                "A", // This means we're gonna build an elliptical arc
                (start - end) / 2,
                ",", // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
                (start - end) / 2,
                0,
                0,
                ",",
                start < end ? 1 : 0,
                end,
                ",",
                height - 30,
              ] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
                .join(" ");
            })
            .style("fill", "none")
            .attr("stroke", "grey")
            .style("stroke-width", 1);

          // Add the circle for the nodes
          var nodes = svg
            .selectAll("mynodes")
            .data(
              data.nodes.sort(function (a, b) {
                return +b.n - +a.n;
              })
            )
            .enter()
            .append("circle")
            .attr("cx", function (d) {
              return x(d.name);
            })
            .attr("cy", height - 30)
            .attr("r", function (d) {
              return size(d.n);
            })
            .style("fill", function (d) {
              return color(d.grp);
            })
            .attr("stroke", "white");

          // And give them a label
          var labels = svg
            .selectAll("mylabels")
            .data(data.nodes)
            .enter()
            .append("text")
            .attr("x", 0)
            .attr("y", 0)
            .text(function (d) {
              return d.name;
            })
            .style("text-anchor", "end")
            .attr("transform", function (d) {
              return (
                "translate(" + x(d.name) + "," + (height - 15) + ")rotate(-45)"
              );
            })
            .style("font-size", 6);

          // Add the highlighting functionality
          nodes
            .on("mouseover", function (d) {
              // Highlight the nodes: every node is grey except him
              nodes.style("opacity", 0.2);
              d3.select(this).style("opacity", 1);
              // Highlight the connections
              links
                .style("stroke", function (link_d) {
                  return link_d.source === d.id || link_d.target === d.id
                    ? color(d.grp)
                    : "#b8b8b8";
                })
                .style("stroke-opacity", function (link_d) {
                  return link_d.source === d.id || link_d.target === d.id
                    ? 1
                    : 0.2;
                })
                .style("stroke-width", function (link_d) {
                  return link_d.source === d.id || link_d.target === d.id
                    ? 4
                    : 1;
                });
              labels
                .style("font-size", function (label_d) {
                  return label_d.name === d.name ? 16 : 2;
                })
                .attr("y", function (label_d) {
                  return label_d.name === d.name ? 10 : 0;
                });
            })
            .on("mouseout", function (d) {
              nodes.style("opacity", 1);
              links
                .style("stroke", "grey")
                .style("stroke-opacity", 0.8)
                .style("stroke-width", "1");
              labels.style("font-size", 6);
            });
        }
      );
    </script>

    <!-- ============================ RELATED SECTION ============================ -->
    <section
      class="bg-light"
      id="portfolio_landing"
      style="padding-top: 30px; padding-bottom: 30px"
    >
      <div class="container">
        <p class="mySeryTitle">Related chart types</p>
        <hr />
        <div class="row">
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="chord.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Chord150.png" alt="" />
            </a>
            <div class="captionPortfolio">Chord diagram</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="network.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Network150.png" alt="" />
            </a>
            <div class="captionPortfolio">Network</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="sankey.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Sankey150.png" alt="" />
            </a>
            <div class="captionPortfolio">Sankey</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="arc.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Arc150.png" alt="" />
            </a>
            <div class="captionPortfolio">Arc diagram</div>
          </div>
          <div class="col-md-2 col-sm-4 portfolio-item">
            <a class="portfolio-link" href="bundle.html">
              <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                  <i class="fa fa-plus fa-3x"></i>
                </div>
              </div>
              <img class="img-fluid" src="img/section/Bundle150.png" alt="" />
            </a>
            <div class="captionPortfolio">Edge bundling</div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================ CONTACT SECTION ============================ -->

    <!-- ANCHOR -->
    <a name="contactanchor"></a>

    <section id="contact" class="bg" style="background-color: white"></section>

    <!-- THIS ALLOWS TO INSERT THE CONTACT CHUNK THAT IS STORED IN A CONTACT.HTML FILE-->
    <script>
      $(function () {
        $("#contact").load("html_chunk/contact.html");
      });
    </script>

    <!-- ============================ FOOTER SECTION ============================ -->
    <footer class="bg-light" id="myFooter"></footer>

    <!-- Start Added by AdThrive -->
    <script
      type="text/javascript"
      async
      src="https://btloader.com/tag?o=5698917485248512&upapi=true&domain=d3-graph-gallery.com"
    ></script>
    <script>
      !(function () {
        "use strict";
        var e;
        (e = document),
          (function () {
            var t, n;
            function r() {
              var t = e.createElement("script");
              (t.src =
                "https://cafemedia-com.videoplayerhub.com/galleryplayer.js"),
                e.head.appendChild(t);
            }
            function a() {
              var t = e.cookie.match("(^|[^;]+)\s*__adblocker\s*=\s*([^;]+)");
              return t && t.pop();
            }
            function c() {
              clearInterval(n);
            }
            return {
              init: function () {
                var e;
                "true" === (t = a())
                  ? r()
                  : ((e = 0),
                    (n = setInterval(function () {
                      (100 !== e && "false" !== t) || c(),
                        "true" === t && (r(), c()),
                        (t = a()),
                        e++;
                    }, 50)));
              },
            };
          })().init();
      })();
    </script>
    <!-- End Added by AdThrive -->

    <!-- THIS ALLOWS TO INSERT THE FOOTER THAT IS STORED IN A FOOTER.HTML FILE-->
    <script>
      $(function () {
        $("#myFooter").load("html_chunk/footer.html");
      });
    </script>

    <!-- ============================ -->

    <!-- =============== JAVASCRIPT SECTION =============== -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!--============================== -->
  </body>
</html>
